<template>
    <div  class="el-message--error" id="after">
        <i class="el-message__icon el-icon-error"></i>
        <p class="el-message__content">{{this.msg}}</p><!---->
    </div>
</template>

<script>
export default {
    name: "SolidWindow",
    props:{
        msg: String,
    },
    data(){
        return{
            data:"",
            flaged:true,
            flagef:true,
            flageq:true,
        }
    },
    methods:{
        Scribblewindow(){
            var back=document.querySelector('#after');
            if (back==null){
                return;
            }
           back.className="alterDiv_after"

            setTimeout(function () {
               back.className=" ";
            },1.5*1000)

        },
        one(){
            // 弹窗动画的
            let offeng=60;
            let offstart=-40;
            let warns=document.querySelector('.el-message--error');
            warns.style.display='block';
            //循环红路灯
            if(this.flaged==true){
                this.flaged==false;
                const intervalId= setInterval(function refer() {
                    if (offstart>=offeng){
                        let star=0.5;
                        let end=1;
                        setTimeout(function () {
                            //console.log("警告框淡出函数")
                            const intervalids=setInterval(function refer() {
                                if (star>=end){
                                    warns.style='display: block;top: -50px';
                                    clearInterval(intervalids)
                                }
                                end-=0.1;
                                warns.style.opacity=end;
                            },95)
                        },3000)
                        clearInterval(intervalId)
                    }
                    offstart+=1;
                    warns.style.top=offstart+'px';
                }, 8)

                document.querySelector('.el-message--error').style.opacity="1";
                this.flaged=true;
            }
        }

    }
}
</script>

<style scoped>
/*----------------*/
#after {
    width: auto;
    min-width: 200px;
    height: 40px;
    background-color: springgreen;
    position: fixed;
    left:50%;
    top: -50px;
    transform:translate(-50%,0);
    z-index:1000;
    border-radius: 174px 174px 157px 157px / 150px 150px 135px 135px;
    display: block;
}
.alterDiv_after{
    animation-name: example;
    animation-duration: 1.5s;
    animation-timing-function: linear;
}
@keyframes example {
    0%{
        top: -40px;
    }
    20%{
        top:-20px;

    }
    40%{
        top: 40px;

    }
    60%{
        top: 60px;
        opacity: 1;
    }
    80%{
        top: 80px;
        opacity: 0.6;

    }
    100%{
        top: 100px;
        opacity: 0;
    }

}

</style>